<template lang="">
  <div class="container">
    <div class="title">修改密码</div>
    <div class="main-box base-shadow pad">
      <div class="password box-center">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
          hide-required-asterisk>
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input type="password" v-model="ruleForm.oldPassword" autocomplete="off" show-password>
            </el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input type="password" v-model="ruleForm.newPassword" autocomplete="off" show-password>
            </el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" show-password>
            </el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" round @click="submitForm('ruleForm')">确认修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import qs from "qs";
  export default {
    name: "Password",
    data() {
      var validatePass = (rule, value, callback) => {
        let hasSpecial = /\s/
        if (value === "") {
          callback(new Error("请输入密码"));
        }else if(value.length > 16){
          callback(new Error("密码长度不得超过16位"));
        }else if(value.length < 8){
          callback(new Error("密码长度不得小于8位"));
        }else if(hasSpecial.test(value)){
          callback(new Error("密码不合法"));
        } else {
          if (this.ruleForm.checkPass !== "") {
            this.$refs.ruleForm.validateField("checkPass");
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.ruleForm.newPassword) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          oldPassword: "",
          newPassword: "",
          checkPass: "",
        },
        rules: {
          oldPassword: [
            { required: true, trigger: "blur", message: "请输入旧密码" },
          ],
          newPassword: [{ validator: validatePass, trigger: "blur" }],
          checkPass: [{ validator: validatePass2, trigger: "blur" }],
        },
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios({
              method: "PUT",
              url: "/qssAdmin/updateNormal",
              withCredentials: true,
              data: qs.stringify({
                oldPassword: window.btoa(this.ruleForm.oldPassword),
                newPassword: window.btoa(this.ruleForm.newPassword),
              }),
              headers: {
                "Content-Type": "application/x-www-form-urlencoded",
              },
            })
              .then((result) => {
                if (result.data.msg == "操作失败") {
                  this.$message({
                    message: result.data.data,
                    type: "error",
                  });
                } else if (result.data.msg == "操作成功") {
                  this.$message({
                    message: "修改密码成功",
                    type: "success",
                  });
                  this.ruleForm = {
                    oldPassword: "",
                    newPassword: "",
                    checkPass: "",
                  };
                }
              })
              .catch((err) => {
                this.$message({
                  message: err.message,
                  type: "info",
                });
              });
          } else {
            return false;
          }
        });
      },
    },
  };
</script>
<style scoped>
  .password {
    width: 500px;
  }

  .el-form {
    transform: translate(-40px);
  }

  .el-button {
    margin-left: 50%;
    transform: translate(-50%);
    width: 200px;
  }
</style>